<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Запрос шутки</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>Сгенерировать шутку о кошках</h1>
        <button class="btn btn-primary" id="generateJoke">Получить шутку</button>
		<br>
		<br>
        <p id="jokeOutput"></p>
    </div>

	<script>
  		document.getElementById('generateJoke').addEventListener('click', function() {
    		fetch('/joke/кошки')
      		.then(response => response.json())
      		.then(data => {
        		document.getElementById('jokeOutput').innerText = data.joke;
      		});
  		});
	</script>
</body>
</html>